<!-- http://www.imooc.com/wiki/uniapp/databinding.html -->
<template>
	<view>
		<!-- 标题 -->
		<view class="page-title">
			<view class="page-title__wrapper">
				<text class="page-title__text">{{title}}</text>
			</view>
		</view>
		<bdpicker :text='text' :isShow='isShow' @isShow='getShow'></bdpicker>
		<intervalBar v-if='isShow' ></intervalBar>
		
		<!-- 选择框 -->
		<view class='picker_view'>
			<!-- 文本 -->
			<view class='picker_text'>
				<text>选择文本 </text>
				<!-- <view class="title-bg">想说就说(最多120个汉字)：</view> -->
			</view>
			
			
			<!-- 普通选择器 -->
			<picker @change="chooseName" :value="index" :range="names">
				<view class="picker_input">
					<input maxlength="10" placeholder="点击这里输入姓名" disabled="1" :value="index?names[index]:''" />
				</view>
			</picker>
			<!-- 普通选择器 -->
			<!-- <picker @change="chooseName" :value="index" :range="names">
				<view class="picker_select" v-if="index == -1">
					
					<text>点击选择~ </text>
				</view>
				<view class="picker_select" v-else-if="index == 1">
					*** {{names[index]}} ***
				</view>
				<view class="picker_select" v-else>
					我的名字是：{{names[index]}}
				</view>
			</picker> -->
			
		</view>
		
		<intervalBar></intervalBar>
	</view>
</template>


<script>
	import bdpicker from "components/bdpicker/bdpicker.vue"
	import intervalBar from "../../components/bdpicker/intervalBar.vue"
	export default {
		//注册组件
		components: {
		  intervalBar,
		  bdpicker,
		},
		data () {
			return {
				isShow: true,
				text: 'from_father_component',
				title: '预报名申请表',
				index: 0,
				names: ['请选择姓名', '小慕课', '大慕课', '老慕课'],
				current_name: "",
			}
		},
		onLoad(){
			console.log('~~~', this.index);
		},
	  methods: {
		chooseName (e) {
		  console.log("当前选择名字的索引是：",e.detail.value);
		  this.index = e.detail.value;
		  this.current_name = this.names[this.index];
		  console.log('--- index, current_name:', this.index, this.current_name);
		},
		getShow(res){
			console.log("从子组件传递过来的值",res)
			this.isShow = res
		}

	}
}
</script>


<style lang="scss" scoped>
	// 标题
	.page-title{
		font-weight:bold;
		font-size: 48upx;
		text-align:center;
		// margin-bottom: 40upx;
	}
	
	// 间隔栏
	.interval_bar{
		height: 20rpx;
		background-color: #F4F5F6;
	}
	
	// 选择框
	.picker_view {
		width: 100%;
		padding: 20upx;
		display: flex;
		margin: auto;
	}
	.picker_text {
		width: 25%;
	}
	.picker_select {
		width: 100%;
	}
</style>
